<template>
  <van-nav-bar
    title="记录"
    left-text="返回"
    left-arrow
    @click-left="handleToBack"
    @click-right="showPicker = true"
    fixed
    placeholder
  >
    <template #right>
      <van-button type="primary" size="mini">{{ result }}</van-button>
    </template>
  </van-nav-bar>
  <div class="u-font-14">
    <van-sticky :offset-top="46">
      <van-row class="u-p-t-10 u-p-b-10" style="background-color: #ffffff;">
        <van-col span="8">英雄</van-col>
        <van-col span="5">胜负</van-col>
        <van-col span="5">时长</van-col>
        <van-col span="6">{{ result }}</van-col>
      </van-row>
    </van-sticky>
    <van-list
      v-model:loading="state.loading"
      :finished="state.finished"
      finished-text="没有更多了"
      error-text="请求失败，点击重新加载"
      @load="onLoad"
      ref="list"
    >
      <van-row
        class="u-m-t-6 u-p-b-6 u-border-bottom"
        v-for="item in recordList"
        :key="item.match_id"
        align="center"
        justify="space-between"
        @click="handleToMatch(item.match_id)"
      >
        <van-col span="8">
          <div class="u-flex u-p-l-10">
            <van-image height="32" width="32" fit="cover" round :src="getHeroAvatar(item.hero_id)"></van-image>
            <div class="u-m-l-10 u-flex u-flex-col u-col-top">
              <span class="u-type-primary u-m-b-2">{{ getHeroName(item.hero_id) }}</span>
              <span class="u-type-info">{{ formatStartTime(item.start_time) }}</span>
            </div>
          </div>
        </van-col>
        <van-col span="5">
          <div class="u-m-b-4">
            {{
              getLobbyType(item.lobby_type)
            }}/{{ getPartSize(item.party_size) }}
          </div>
          <div class="u-flex u-flex-col u-col-center">
            <van-tag type="success" v-if="isWin(item.player_slot, item.radiant_win)">胜利</van-tag>
            <van-tag type="danger" v-else>失败</van-tag>
          </div>
        </van-col>
        <van-col span="5">
          <div class="u-flex u-flex-col u-col-center">
            <div class="u-m-b-4">
              {{
                formatGameDuration(item.duration)
              }}
            </div>
            <div
              :class="isRadiant(item.player_slot) ? 'radiant' : 'dire'"
            >{{ isRadiant(item.player_slot) ? '天辉' : '夜魇' }}</div>
          </div>
        </van-col>
        <van-col span="6">
          <div class="u-p-r-10 u-p-l-10">
            <div class="u-m-b-4">{{ item[getSortKey()] }}</div>
            <van-progress :percentage="getProgress(item[getSortKey()])" :show-pivot="false" />
          </div>
        </van-col>
      </van-row>
    </van-list>
  </div>

  <van-popup v-model:show="showPicker" round position="bottom">
    <van-picker :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" />
  </van-popup>
</template>
<script setup>
import { onMounted, ref, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getPlayerMatches } from '@/api/player'
import {
  getHeroAvatar,
  getHeroName,
  formatStartTime,
  isWin,
  getLobbyType,
  formatGameDuration,
  isRadiant,
  getPartSize
} from '@/utils/dotaHelper'

const paramMap = [
  {
    text: '击杀',
    value: 'kills'
  },
  {
    text: '每分钟操作',
    value: 'actions_per_min'
  },
  {
    text: '助攻',
    value: 'assists'
  },
  {
    text: '翻盘',
    value: 'comeback'
  },
  {
    text: '击杀信使',
    value: 'courier_kills'
  },
  {
    text: '死亡',
    value: 'deaths'
  },
  {
    text: '反补',
    value: 'denies'
  },
  {
    text: '时长',
    value: 'duration'
  },
  {
    text: '前10分钟发育',
    value: 'lane_efficiency_pct'
  },
  {
    text: '购买宝石',
    value: 'purchase_gem'
  },
  {
    text: '每分钟金钱',
    value: 'gold_per_min'
  },
  {
    text: '英雄伤害',
    value: 'hero_damage'
  },
  {
    text: '英雄治疗',
    value: 'hero_healing'
  },
  {
    text: 'KAD',
    value: 'kda'
  },
  {
    text: '正补',
    value: 'last_hits'
  },
  {
    text: '被碾压',
    value: 'loss'
  },
  {
    text: '小地图信号',
    value: 'pings'
  },
  {
    text: '击杀野怪',
    value: 'neutral_kills'
  },
  {
    text: '购买假眼',
    value: 'purchase_ward_observer'
  },
  {
    text: '购买真眼',
    value: 'purchase_ward_sentry'
  },
  {
    text: '购买圣剑',
    value: 'purchase_rapier'
  },
  {
    text: '碾压',
    value: 'stomp'
  },

  {
    text: '控制时间',
    value: 'stuns'
  },
  {
    text: '放弃',
    value: 'throw'
  },
  {
    text: '防御塔伤害',
    value: 'tower_damage'
  },
  {
    text: '摧毁防御塔',
    value: 'tower_kills'
  },
  {
    text: '购买TP',
    value: 'purchase_tpscroll'
  },
  {
    text: '每分钟经验',
    value: 'xp_per_min'
  }
]

const list = ref(null)
const showPicker = ref(false)
const columns = ref([])
const result = ref('击杀')
const onConfirm = value => {
  recordList.value = []
  result.value = value
  list.value.check()
  showPicker.value = false
}

const router = useRouter()
const handleToBack = () => {
  router.back()
}

const query = {
  limit: 20,
  offset: 0,
};
const state = reactive({
  loading: false,
  finished: false,
  error: false,
});
const recordList = ref([])
const onLoad = () => {
  const sort = getSortKey()
  getPlayerMatches(route.params.account_id, {
    sort,
    limit: query.limit,
    offset: query.offset,
  })
    .then((res) => {
      if (res.length) {
        recordList.value.push(...res);
        query.offset = query.offset + query.limit;
        state.loading = false;
      } else {
        state.finished = true;
      }
    })
    .catch(() => {
      state.error = true;
    });
};

const route = useRoute()
onMounted(() => {
  paramMap.forEach(item => {
    columns.value.push(item.text)
  })
})
const getSortKey = () => {
  return paramMap.find(item => {
    return item.text === result.value
  }).value
}

const getMaxValue = () => {
  let max = 0
  const sort = getSortKey()
  recordList.value.forEach(item => {
    if (item[sort] > max) {
      max = item[sort]
    }
  })
  return max
}
const getProgress = value => {
  const maxValue = getMaxValue()
  return (value / maxValue) * 100
}
const handleToMatch = match_id => {
  router.push({
    name: 'Match',
    params: {
      match_id
    }
  })
}
</script>
<style lang="scss">
</style>